<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>

</head>


<body>
    <div id="bar" style="width:1000px; height:600px;"></div>
    <script>
        var chart = echarts.init(document.getElementById('bar'), 'white', { renderer: 'canvas' });
        var old_data = [];
        $(
            function () {
                fetchData(chart);
                // setInterval()定时器 每2s执行一次getDynamicData进行增量更新
                setInterval(getDynamicData, 2000);
            }
        );
        // 图表渲染：初始全量获取配置参数
        function fetchData() {
            $.ajax({
                type: "GET",
                url: "http://127.0.0.1:5000/lineChart",
                dataType: "json",
                success: function (result) {
                    chart.setOption(result);
                    old_data = chart.getOption().series[0].data;
                }
            });
        }
        // 增量数据：定时重置数据属性
        function getDynamicData() {
            $.ajax({
                type: "GET",
                url: "http://127.0.0.1:5000/lineDynamicData",
                dataType: "json",
                success: function (result) {
                    old_data.push([result.name, result.value]);
                    chart.setOption({
                        series: [{ data: old_data }]
                    });
                }
            });
        }

    </script>
</body>

</html>